<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lk
 * @LastEditTime: 2022-01-10 22:24:23
-->
<template>
  <!--1. 容器 -->
  <div ref="right1_container" style="height: 95%"></div>
</template>
<script>
import { Line } from '@antv/g2plot';

export default{
mounted(){
 this.initChat();
},
methods:{
   initChat(){
     const data = [
  { "Date": "2010-10","scales": 1998},
  { "Date": "2011-10","scales": 2753},
  { "Date": "2012-10","scales": 4378},
  { "Date": "2013-10","scales": 6753},
  { "Date": "2014-10","scales": 8048},
  { "Date": "2015-10","scales": 12738},
  { "Date": "2016-10","scales": 14760},
  { "Date": "2017-10","scales": 19982},
  { "Date": "2018-10","scales": 21348},
  { "Date": "2019-10","scales": 31078},
  { "Date": "2020-10","scales": 58907},
];
    const line = new Line(this.$refs.right1_container, {
      data,
      padding: 'auto',
      xField: 'Date',
      yField: 'scales',
      annotations: [
        // 低于中位数颜色变化
        {
          type: 'regionFilter',
          start: ['min', 'median'],
          end: ['max', '0'],
          color: '#F4664A',
        },
        {
          type: 'text',
          position: ['min', 'median'],
          content: '中位数',
          offsetY: -4,
          style: {
            textBaseline: 'bottom',
          },
        },
        {
          type: 'line',
          start: ['min', 'median'],
          end: ['max', 'median'],
          style: {
            stroke: '#F4664A',
            lineDash: [2, 2],
          },
        },
      ],
    });

    line.render();
}
}
}
</script>